<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"/>-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="web description is me">
    <meta name="author" content="wangqinmin">
    <link rel="icon" href="../img/icon/B.ico">
    <title>bootstrap选项卡</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css"/>
    <!--<link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap-theme.css"/>-->
    <link href="../css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <!--<link href="../css/starter-template.css" rel="stylesheet">-->
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../bootstrap-3.3.7/js/bootstrap.js"></script>
    <script type="text/javascript">

        // 选项卡，e.target 现在被激活的对象   e.relatedTarget： 上一次，被激活的对象
        // 就是现在点击的选项卡，和上次点击的选项卡的区别
        $(function () {
            // 选择器 ，选择所有的a标签下面的有 data-toggle="tab" 属性的代码；
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                //e.target // newly activated tab
                //e.relatedTarget // previous active tab
                var a = e.target.innerHTML;
                $("#testshow").html(a);
            });
        });

    </script>
</head>
<body>

<!-- container：作用相当于一个自动居中的容器(用的地方很多，不然样式可能难看) -->
<div class="container">
    <div class="row">

        <!-- 定义选项卡 -->
        nav-pills 和 ata-toggle="pill"一起用： 胶囊模式
        <ul class="nav nav-pills">
            <!-- active:表示默认选择第一个选项卡 -->
            <!-- data-toggle="tab" ：触发javaScript事件，找到对应的选项卡 -->
            <!-- href="#pan1" ：对应到编写的自定义面板 id -->
            <li class="active"><a data-toggle="tab" href="#pan1">搜索</a></li>
            <li><a href="#pan2" data-toggle="pill">常规</a></li>
            <li><a href="#pan3" data-toggle="tab">查看</a></li>
            <li><a href="#pan4" data-toggle="tab">运行</a></li>
            <li><a href="#pan5" data-toggle="tab">帮助</a></li>
        </ul>

        <!-- 定义面板 -->
        为了让面板更平滑使用：fade ；内容多的时候可以清楚看见
        <div class="tab-content">
            <!-- active：默认显示第一个面板 -->
            <div class="tab-pane active" id="pan1">
                <p class="h3" style="color: #2aabd2">
                    搜索面板搜索面板搜索面板搜索面板搜索面板搜索面板搜索面板搜索面板搜索面板搜索面板搜索面板
                </p>
            </div>
            <div class="tab-pane fade" id="pan2">
                <p class="h1" style="color: #b92c28">
                    常规面板常规面板常规面板常规面板常规面板常规面板常规面板常规面板常规面板常规面板常规面板
                </p>
            </div>
            <div class="tab-pane" id="pan3">
                <p class="h2" style="color: #b2dba1">
                    查看面板查看面板查看面板查看面板查看面板查看面板查看面板查看面板查看面板查看面板查看面板
                </p>
            </div>
            <div class="tab-pane" id="pan4">
                <p class="h5" style="color: #ce8483">
                    运行面板运行面板运行面板运行面板运行面板运行面板运行面板运行面板运行面板运行面板运行面板
                </p>
            </div>
            <div class="tab-pane" id="pan5">
                <p class="h1" style="color: #2aabd2">
                    帮助面板帮助面板帮助面板帮助面板帮助面板帮助面板帮助面板帮助面板帮助面板帮助面板帮助面板
                </p>
            </div>
        </div>
    </div>
</div>
<h1 id="testshow">标识</h1>
</body>
</html>